<template>
  <div class="fengbuContainer">
    <div class="bcColor"></div>
    <div class="point panel">
      <div class="inner">
        <div class="tabs">
          <a href="javascript:;" :class="{ active: activeColor === 'red' }" @click="changeToJingdian">景点分布统计</a>
          <a href="javascript:;" :class="{ active: activeColor === 'blue' }" @click="changeToLuxingshe">旅行社分布统计</a>
        </div>
        <div class="chart" v-show="active === 'jingdian'">
          <div class="pie" ref="chartJingdian"></div>
          <div class="data">
            <div class="item">
              <h4>819</h4>
              <span>
                <i class="icon-dot" style="color: #ed3f35"></i>
                景点总数
              </span>
            </div>
            <div class="item">
              <h4>1483</h4>
              <span>
                <i class="icon-dot" style="color: #eacf19"></i>
                旅行社总数
              </span>
            </div>
          </div>
        </div>
        <div class="chart" v-show="active === 'luxingshe'">
          <div class="pie" ref="chart1"></div>
          <div class="data">
            <div class="item">
              <h4>819</h4>
              <span>
                <i class="icon-dot" style="color: #ed3f35"></i>
                景点总数
              </span>
            </div>
            <div class="item">
              <h4>1483</h4>
              <span>
                <i class="icon-dot" style="color: #eacf19"></i>
                旅行社总数
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value1 = ref(true)
  },
  name: 'JingdianFenbu',
  data() {
    return {
      optionJingdian: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 注意颜色写的位置
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        series: [
          {
            name: '景点数量',
            type: 'pie',
            // 如果radius是百分比则必须加引号
            radius: ['10%', '70%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            data: [],
            // 修饰饼形图文字相关的样式 label对象
            label: {
              fontSize: 10
            },
            // 修饰引导线样式
            labelLine: {
              // 连接到图形的线长度
              length: 6,
              // 连接到文字的线长度
              length2: 8
            }
          }
        ]
      },
      optionLuxingshe: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 注意颜色写的位置
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        series: [
          {
            name: '旅行社数量',
            type: 'pie',
            // 如果radius是百分比则必须加引号
            radius: ['10%', '70%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            data: [],
            // 修饰饼形图文字相关的样式 label对象
            label: {
              fontSize: 10
            },
            // 修饰引导线样式
            labelLine: {
              // 连接到图形的线长度
              length: 6,
              // 连接到文字的线长度
              length2: 8
            }
          }
        ]
      },
      jingdianDataUrl: '/data-SiChuan/rest/data/featureResults.json?returnContent=true',
      luxingsheDataUrl: '/data-SiChuan/rest/data/featureResults.json?returnContent=true',
      jingdianDataOption: {
        getFeatureMode: 'SQL',
        datasetNames: ['SiChuan:州市景点数量'],
        maxFeatures: 1000,
        queryParameter: {
          sortClause: null,
          ids: null,
          name: null,
          attributeFilter: 'SMID>0',
          groupClause: null,
          linkItems: null,
          joinItems: null,
          fields: null
        }
      },
      luxingsheDataOption: {
        getFeatureMode: 'SQL',
        datasetNames: ['SiChuan:州市旅行社数量'],
        maxFeatures: 2000,
        queryParameter: {
          sortClause: null,
          ids: null,
          name: null,
          attributeFilter: 'SMID>0',
          groupClause: null,
          linkItems: null,
          joinItems: null,
          fields: null
        }
      },
      active: 'jingdian',
      activeColor: 'red'
    }
  },
  created() {
    // this.getJingdianData()
  },
  mounted() {
    // this.getEchartData()
    this.getJingdianData()
    this.getluxingsheData()
  },
  methods: {
    setJingdianData() {
      let chart = this.$refs.chartJingdian
      if (chart) {
        const myChart = this.$echarts.init(chart)
        myChart.setOption(this.optionJingdian)
      }
    },
    setLuxingsheData() {
      const chart1 = this.$refs.chart1
      if (chart1) {
        const myChart = this.$echarts.init(chart1)
        myChart.setOption(this.optionLuxingshe)
      }
    },
    async getJingdianData() {
      const { data: res } = await this.$http.post(this.jingdianDataUrl, this.jingdianDataOption)
      if (res !== {}) {
        const result = res.features.map(item => {
          return {
            value: parseFloat(item.fieldValues[8]),
            name: item.fieldValues[2]
          }
        })
        result.pop()
        this.optionJingdian.series[0].data = result
      }
      this.setJingdianData()
    },
    async getluxingsheData() {
      const { data: res } = await this.$http.post(this.luxingsheDataUrl, this.luxingsheDataOption)
      if (res !== {}) {
        const transformedArray = res.features.map(item => {
          const valueIndex = item.fieldNames.indexOf('数量')
          const nameIndex = item.fieldNames.indexOf('市州')

          const value = parseFloat(item.fieldValues[valueIndex])
          const name = item.fieldValues[nameIndex]

          return { value, name }
        })

        this.optionLuxingshe.series[0].data = transformedArray
      }
      this.setLuxingsheData()
    },
    changeToJingdian() {
      this.active = 'jingdian'
      this.activeColor = 'red'
    },
    changeToLuxingshe() {
      this.active = 'luxingshe'
      this.activeColor = 'blue'
    }
  }
}
</script>

<style lang="less" scoped>
.fengbuContainer {
  display: flex;
  width: 280px;
  height: 290px;
  border: 10px solid pink;
  // background-color: #006eff;
  border-width: 51px 38px 20px 132px;
  border-image-source: url(../../assets/images/border.png);
  border-image-slice: 51 38 20 132;
  margin-bottom: 20px;
  .bcColor {
    position: absolute;
    top: 10px;
    left: 6px;
    width: 430px;
    height: 330px;
    background-color: #00253170;
    // border: 2px solid #1950c4;
    box-shadow: 0 0 5px #0084ff, 0 0 10px #0084ff, 0 0 20px #0084ff;
    // border-radius: 8%;
  }
}

.inner {
  position: absolute;
  top: 0px;
  left: 20px;
  right: -38px;
  width: 400px;
  bottom: -0.25rem;
  padding: 0.3rem 0.45rem;
  /* background-color: red; */
}

.point .chart {
  display: flex;
  width: 400px;
  margin-top: 24px;
  justify-content: space-between;
}

.point .pie {
  width: 330px;
  height: 300px;
  margin-left: -34px;
  /* background-color: pink; */
}

.point .data {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  top: 55px;
  left: 300px;
  width: 120px;
  padding: 36px 20px;
  box-sizing: border-box;
  background-image: url(../../assets/images/rect.png);
  background-size: cover;
}

.point h4 {
  margin-bottom: 12px;
  font-size: 28px;
  color: #fff;
}

.point span {
  display: block;
  color: #0073ff;
  font-size: 16px;
}

.point .tabs {
  padding: 0 36px;
  margin-bottom: 18px;
  display: flex;
  position: absolute;
  left: -24px;
  top: 20px;
}

.point .tabs a {
  z-index: 999;
  color: #00ffa8;
  font-size: 18px;
  padding: 0 27px;
  text-decoration: none;
}

.point .tabs a:first-child {
  padding-left: 0;
  border-right: 2px solid #00f2f1;
}

.point .tabs a.active {
  color: #ff0000;
  font-weight: bold;
}
</style>
